<template>
  <div class="activity-management-container">
    <h1>活动管理</h1>
    
    <!-- 新增活动表单 -->
    <div class="add-activity-form">
      <h2>添加新活动</h2>
      <form @submit.prevent="addActivity">
        <div class="form-group">
          <label>标题:</label>
          <input type="text" v-model="newActivity.title" required />
        </div>
        <div class="form-group">
          <label>描述:</label>
          <textarea v-model="newActivity.description" required></textarea>
        </div>
        <div class="form-group">
          <label>日期:</label>
          <input type="date" v-model="newActivity.date" required />
        </div>
        <div class="form-group">
          <label>地点:</label>
          <input type="text" v-model="newActivity.location" required />
        </div>
        <button type="submit">添加活动</button>
      </form>
    </div>
    
    <!-- 活动列表 -->
    <div class="activities-table">
      <h2>所有活动</h2>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>标题</th>
            <th>日期</th>
            <th>地点</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="activity in activities" :key="activity.id">
            <td>{{ activity.id }}</td>
            <td>
              <input type="text" v-model="activity.title" @change="updateActivity(activity)" />
            </td>
            <td>
              <input type="date" v-model="activity.date" @change="updateActivity(activity)" />
            </td>
            <td>
              <input type="text" v-model="activity.location" @change="updateActivity(activity)" />
            </td>
            <td>
              <button @click="deleteActivity(activity.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newActivity: {
        title: '',
        description: '',
        date: '',
        location: ''
      }
    }
  },
  computed: {
    activities() {
      return this.$store.state.globalActivities;
    }
  },
  methods: {
    addActivity() {
      // 简单的表单验证
      if (!this.newActivity.title || !this.newActivity.date || !this.newActivity.location) {
        alert('请填写所有必填字段')
        return
      }
      
      // 生成新的活动ID
      const newId = Math.max(...this.activities.map(a => a.id)) + 1
      
      // 添加新活动
      this.activities.push({
        id: newId,
        ...this.newActivity
      })
      
      // 重置表单
      this.newActivity = {
        title: '',
        description: '',
        date: '',
        location: ''
      }
    },
    updateActivity(updatedActivity) {
      // 这里可以添加与后端API交互的代码来持久化更新
      console.log('活动已更新:', updatedActivity)
    },
    deleteActivity(id) {
      // 确认删除
      if (confirm('确定要删除这个活动吗？')) {
        this.$store.dispatch("setActivities", this.activities.filter(activity => activity.id !== id))
      }
    }
  }
}
</script>

<style scoped>
.activity-management-container {
  padding: 20px;
}

.add-activity-form, .activities-table {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 30px;
}

h2 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="date"],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  height: 80px;
  resize: vertical;
}

button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #369d6b;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f5f5f5;
}

td input {
  width: 100%;
  box-sizing: border-box;
}
</style>